<template>
  <el-row  :gutter="40" type="flex" justify="center">
    <el-col :span="10">

      <div class="cct">
<!--        <el-card >-->
          <div class="timeContainer">{{ complZero(form.hour) }}</div>
          <div class="timeContainer">:</div>
          <div class="timeContainer">{{ complZero(form.minute) }}</div>
          <div class="timeContainer">:</div>
          <div class="timeContainer">{{ complZero(form.second) }}</div>
<!--          <el-button type="primary" @click="start()">{{ kaishi }}</el-button>-->
        <button class="btt" @click="start()">
          <span>{{ kaishi }}</span>
          <div class="liquid"></div>
        </button>
        <button class="btt" @click="dialogVisible = true;end()">
          <span>结束</span>
          <div class="liquid"></div>
        </button>
        <button class="btt" @click="end()">
          <span>暂停</span>
          <div class="liquid"></div>
        </button>
        <button class="btt" @click="reset()">
          <span>重置</span>
          <div class="liquid"></div>
        </button>
<!--          <el-button type="primary" @click="dialogVisible = true;end()">结束</el-button>-->
<!--          <el-button type="primary" @click="end()">暂停</el-button>-->
<!--          <el-button type="primary" @click="reset()">重置</el-button>-->
<!--        </el-card>-->

      </div>
    </el-col>
    <el-col :span="10">
      <div class="box-card">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>设置提醒</span>
            </div>
          </template>
          <div>

            <div class="ts"><el-input-number v-model="num1" :min="0" :max="11" size="small"/>小时</div>
            <div class="ts"><el-input-number v-model="num2" :min="0" :max="59" size="small"/>分钟</div>
            <div class="ts"><el-input-number v-model="num3" :min="0" :max="59" size="small"/>秒</div>
          </div>
          <button class="btn" @click="ts();start()"> 确认</button>
<!--          <el-button type="primary" @click="ts();start()">确认</el-button>-->
          <button class="btn" @click="rets()"> 重置</button>
<!--          <el-button type="primary" @click="rets()">重置</el-button>-->
        </el-card>
      </div>
    </el-col>
  </el-row>

  <el-card class="tab">
    <el-table :data="record" stripe style="width: 100%">
      <el-table-column prop="item" label="事项"  />
      <el-table-column prop="last" label="持续时间" width="180">
        <template  #default="last">
          {{ complZero(last.row.hour)}}小时{{ complZero(last.row.minute)}}分钟{{complZero(last.row.second)}}秒
        </template>
      </el-table-column>
      <el-table-column prop="create" label="完成时间" width="260"/>
    </el-table>
  </el-card>

  <el-dialog
      v-model="dialogVisible"
      title="专注"
      width="30%"
  >
    <div class="zz">
      您专注了{{ form.hour}}小时{{ form.minute}}分钟{{form.second}}秒
    </div>

    <el-form :model="accomp">
      <el-form-item label="完成了" :label-width="formLabelWidth">
        <el-input v-model="accomp.item" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false;add(accomp);reset()">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>



</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import axios from "@/utils/axios";
import {ElMessage, ElMessageBox} from 'element-plus'
import qs from "qs";

let timer = null;
const form = ref({
      item: "",
      hour: 0,
      minute: 0,
      second: 0,
      time: 0,
    }
)
const record = ref()
const kaishi = ref("开始")
const dialogVisible = ref(false)
const accomp = ref({
  item:""
})
const ad = ({
  item:"",
  hour:"",
  minute:"",
  second:"",
})
const num1 = ref(0)
const num2 = ref(0)
const num3 = ref(0)

function start(){
  timer = setInterval(() => {
    form.value.second = form.value.second + 1;
    if (form.value.second >= 60) {
      form.value.second = 0;
      form.value.minute = form.value.minute + 1;
    }
    if (form.value.minute >= 60) {
      form.value.minute = 0;
      form.value.hour = form.value.hour + 1;
    }
    form.value.time =
        complZero(form.value.hour) +
        ":" +
        complZero(form.value.minute) +
        ":" +
        complZero(form.value.second);
  }, 1000);
}
function reset() {
  window.clearInterval(timer);
  window.clearInterval(ts);
  form.value.hour = 0;
  form.value.minute = 0;
  form.value.second = 0;
  kaishi.value = "开始"
}
function end() {
  timer = clearInterval(timer);
  kaishi.value = "继续";
}
function complZero(n) {
  return n < 10 ? "0" + n : "" + n;
}
function ts(){

  ts = setInterval(() => {
    if ((form.value.second == num3.value) && (form.value.minute == num2.value) && (form.value.hour == num1.value)){
      alert("到时提醒！")
    }
  }, 1000);
}
function rets(){
  num1.value = 0;
  num2.value = 0;
  num3.value = 0;
  window.clearInterval(ts);
}
function add(accomp){
  ad.item = accomp.item;
  ad.hour = form.value.hour;
  ad.minute = form.value.minute;
  ad.second = form.value.second;
  console.log(ad)
  axios.post(
      "/focusadd",
      qs.stringify(ad)
  )
      .then(res => {
        location.reload()
        ElMessage({
          message: '添加成功',
          type: 'success',
        })
      })
      .catch(err => {
        console.log(err);
        ElMessage.error('添加失败')
      })
}
onMounted(() => {


  axios
      .get("/focusquery")
      .then((res: any) => {
        // console.log("res",res);
        record.value = res

      })
      .catch((err: any) => {});
});
</script>


<style scoped>
.cct{
  background: rgba( 247, 255, 247, 0.7 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 16px );
  -webkit-backdrop-filter: blur( 16px );
  border-radius: 20px;
}
.timeContainer {
  font-size: 120px;
  margin-bottom: 10px;
  display: inline;
}
.box-card {
  width: 100%;
  background: rgba( 247, 255, 247, 0.7 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 16px );
  -webkit-backdrop-filter: blur( 16px );
  border-radius: 10px;
}
.tab{
  /*margin:70px;*/
  width: 70%;
  margin: auto;
}
.zz{
  font-size: 30px;
  margin: auto;
}
.ts{
  display: inline;
}

.btt {
  position: relative;
  padding: 19px 36px;
  display: inline;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  border-radius: 40px;
  border: none;
}

.btt span {
  position: relative;
  color: #fff;
  font-family: Arial;
  letter-spacing: 8px;
  z-index: 1;
}

.btt .liquid {
  position: absolute;
  top: -80px;
  left: 0;
  width: 100%;
  height: 200px;
  background: #4973ff;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, .5);
  transition: .5s;
}

.btt .liquid::after,
.btt .liquid::before {
  content: '';
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -75%);
  background: #fff;
}

.btt .liquid::before {
  border-radius: 45%;
  background: rgba(20, 20, 20, 1);
  animation: animate 5s linear infinite;
}

.btt .liquid::after {
  border-radius: 40%;
  background: rgba(20, 20, 20, .5);
  animation: animate 10s linear infinite;
}

.btt:hover .liquid {
  top: -120px;
}

@keyframes animate {
  0% {
    transform: translate(-50%, -75%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -75%) rotate(360deg);
  }
}
/* From www.lingdaima.com */
.btn {
  width: 6.5em;
  height: 2.3em;
  margin: 0.5em;
  background: black;
  color: white;
  border: none;
  border-radius: 0.625em;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.btn:hover {
  color: black;
}

.btn:after {
  content: "";
  background: white;
  position: absolute;
  z-index: -1;
  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skewX(-45deg) scale(0, 1);
  transition: all 0.5s;
}

.btn:hover:after {
  transform: skewX(-45deg) scale(1, 1);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
</style>
